<template>
  <div>
    <div class="login-user-info">
      <p>
        <i class="iconfont icon-wode2"></i>
        <input type="text" placeholder="手机号" @change="getPhone" v-model="username">
      </p>
      <p class="input-verification-code">
        <i class="iconfont icon-mima login-icon-weight"></i>
        <input type="text" placeholder="输入验证码" v-model="verifyCode">
        <span class="verification-code" @click="getVerifyCode" >获取验证码</span>
      </p>
      <div class="regist-prompts">{{ prompts }}</div>
      <div class="regist-btn" @click="registUser">注册</div>
    </div>
    <div class="user-accept">
      <label>
       <input type="checkbox" name="radios" v-model="param" value="1">
       我已阅读并同意<span>《用户协议》</span>
      </label>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'UserInfo',
    data () {
       return{
            param: '' ,//设置默认值为1，即设置第一个单选框为选中状态
            username: '',
            verifyCode: '',
            prompts: ''
        }
    },
    methods: {
      getPhone () {
        let result = (/^1[34578]\d{9}$/).test(this.username);
        if(!result){
          this.prompts = '请输入手机号'
        }
      },
      // userVerify () {
      //   this.verifyCode = 
      // },
      //获取验证码
      getVerifyCode () {
         let result = (/^1[34578]\d{9}$/).test(this.username);
         if(result){
           this.$axios.post(this.HOST+'/api/verify',{
              phone: this.username,
            })
            .then(res => {
              console.log(res);
              
            })
            .catch(error => {
              console.log(error)
            })
         }else{
           this.prompts = '请输入手机号'
         }
      },
      //提交注册信息
      registUser () {
        this.$axios.post(this.HOST+'/api/regist',{
          phone: this.username,
          verifyCode: this.verifyCode
        })
        .then(res => {
          console.log(res)
          //注册成功了去登录页面
          if(res.data.msg){
            this.$router.push('/login')
          }else{
            this.prompts = '该用户已注册过'
          }
              
        })
        .catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

<style scoped>
.login-user-info{
  width: 5.7rem;
  margin: 0 auto;
}
.login-user-info p{
  position: relative;
}
.login-user-info p i{
  position: absolute;
  top: 0.08rem;
  left: 0.03rem; 
  font-size: 0.38rem;
}
.login-icon-weight{
  font-weight: bold;
}
.login-user-info input{
  width: 100%;
  height: 0.65rem;
  outline: none;
  border-bottom: 1px solid #13bf92;
  font-size: 0.3rem;
  padding-left: 0.5rem;
  margin-bottom: 0.68rem;
}
.verification-code{
  display: inline-block;
  width: 1.4rem;
  height: 0.62rem;
  line-height: 0.65rem;
  text-align: center;
  color: #fff;
  background-color: #13bf92;
  position: absolute;
  top: 0.05rem;
  right: 0;
}
.regist-prompts{
  color: #ff0000;
  font-size: 0.26rem;
}
/*regist button*/
.regist-btn{
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  color: #fff;
  background-color: #13bf92;
  border-radius: 0.1rem;
  margin-top: 0.35rem;
}

/*用户是否同意协议*/
.user-accept{
  margin-left: 0.9rem;
  margin-top: 0.25rem;
}
.user-accept input{
  transform: translateY(0.05rem);
  margin-right: 0.05rem;
  width: 0.3rem;
  height: 0.3rem;
}
.user-accept label span{
  color: #13bf92;
}


</style>